<template>
    <editor v-model="content" :init="editorConfig" />
</template>

<script setup>
import Editor from '@tinymce/tinymce-vue';
import { onUnmounted, defineProps, ref, watch, defineEmits,onMounted } from 'vue';
import share from '../util/commnet'


const editorConfig = ref({
    language: 'zh-Hans',
    // 其他的TinyMCE配置项
    plugins: 'image',
    // toolbar: 'image',
    encoding: 'utf-8',
    height:res.FWBheight,
    // images_upload_url: `${share.http}${share.dir}/image`,
    // images_upload_base_path: '/demo',
    // image_advtab: true,
    // images_upload_handler: (blobInfo, progress) =>
    //     new Promise((resolve, reject) => {
    //         resolve('data:' + blobInfo.blob().type + ';base64,' + blobInfo.base64());
    //     }),
})

const res = defineProps({
    content: {
        type: String,
        default: ''
    },
    key:{
        type:Boolean,
        default:false
    },
    sc:{
        type:Boolean,
        default:false
    },
    FWBheight:{
        type:String,
        default:''
    }
})
const emit = defineEmits(['setData'])
const content = ref('')


watch(
    () => res.content,
    (newContent, oldContent) => {

        content.value =  newContent;   //进行解码操作

        // 执行其他处理逻辑
    }
)

watch(
    ()=>res.sc,
    (newContent,oldContent)=>{

        if(newContent){
            emit('setData',encodeURIComponent(content.value));  //进行编码操作
        }
    }
)

onMounted(()=>{

    if(res.content){
        content.value =res.content;
    }else{
        content.value = res.content
    }
})
onUnmounted(()=>{

    emit('setData',encodeURIComponent(content.value));  //进行编码操作
    content.value = ''
})

</script>